<template>
  <div class="huan-liu-fa">
    <div class="top flex justify-start">
      <p class="title" :class="activeJ === index ? 'j-active' : ''" @click="handleJ(index, item)"
        v-for="(item, index) in topList" :key="'top' + index">
        {{ item.label }} <span>({{ item.value }})</span>
      </p>
    </div>
    <div class="bot flex">
      <div class="item flex" v-for="(child, childIndex) in botList" :key="'bot' + childIndex">
        <!--	  相位    -->
        <h2>{{ child.label }}</h2>
        <div class="qiao-bi flex flex-col">
          <div class="qiao-bi-item flex" v-for="(item, itemIndex) in child.value" :key="'child' + itemIndex">
            <!--	    桥臂      -->
            <h3>{{ item.type }}</h3>
            <div class="fata flex">
              <p @click="
                handleFata(
                  childIndex + '-' + itemIndex + '-' + idx,
                  ite.status,
                  ite.fata,
                  item.type,
                  child.label
                )
                " :class="active === childIndex + '-' + itemIndex + '-' + idx
                    ? 'active'
                    : ''
                  " v-for="(ite, idx) in item.val" :key="'ite' + idx">
                {{ ite.fata }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import statePredCvResponse from "../json/statePredCv.json";

export default {
  name: "HuanLiuFa",
  data() {
    return {
      activeJ: 0,
      activeLabel: "",
      topList: [
        { label: "正极换流阀", value: 1 },
        { label: "负极换流阀", value: 0 },
      ],
      active: "0-0-0",
      botList: [
        {
          label: "A相",
          value: [
            {
              type: "上桥臂",
              val: [
                {
                  fata: "阀塔1",
                  status: 1,
                },
                {
                  fata: "阀塔2",
                  status: 1,
                },
              ],
            },
            {
              type: "下桥臂",
              val: [
                {
                  fata: "阀塔1",
                  status: 1,
                },
                {
                  fata: "阀塔2",
                  status: 1,
                },
              ],
            },
          ],
        },
        {
          label: "B相",
          value: [
            {
              type: "上桥臂",
              val: [
                {
                  fata: "阀塔1",
                  status: 1,
                },
                {
                  fata: "阀塔2",
                  status: 1,
                },
              ],
            },
            {
              type: "下桥臂",
              val: [
                {
                  fata: "阀塔1",
                  status: 1,
                },
                {
                  fata: "阀塔2",
                  status: 1,
                },
              ],
            },
          ],
        },
        {
          label: "C相",
          value: [
            {
              type: "上桥臂",
              val: [
                {
                  fata: "阀塔1",
                  status: 1,
                },
                {
                  fata: "阀塔2",
                  status: 1,
                },
              ],
            },
            {
              type: "下桥臂",
              val: [
                {
                  fata: "阀塔1",
                  status: 1,
                },
                {
                  fata: "阀塔2",
                  status: 1,
                },
              ],
            },
          ],
        },
      ],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    replaceProperties(item, replacements) {
    },

    transformData(data) {
      const dataList = [];
      data.forEach((item, index) => {
        let phaseData = {};

        const { polar, tower, bridge, phase, count } = item;
        // 如果当前phase不在phaseData中 则新增
        if (!phaseData[phase]) {
          phaseData = {
            phase,
            bridgeTop: [],
            bridgeBot: [],
          };
          if (bridge.indexOf("上") !== -1) {
            phaseData.bridgeTop.push({ tower: tower, status: count });
          }
          if (bridge.indexOf("下") !== -1) {
            phaseData.bridgeBot.push({ tower: tower, status: count });
          }
          dataList.push(phaseData);
        } else {
          console.log("🚀 item.phase => ", item.phase);
        }
        // 如果当前phaseData不在结果对象中，则添加它
        // if (!dataList.some((ele) => ele.phase === phase)) {
        //   phaseData = {
        //     phase,
        //     bridgeTop: [],
        //     bridgeBot: [],
        //   };
        //   if (bridge.indexOf("上") !== -1) {
        //     phaseData.bridgeTop.push({ tower: tower, status: count });
        //   }
        //   if (bridge.indexOf("下") !== -1) {
        //     phaseData.bridgeBot.push({ tower: tower, status: count });
        //   }
        //   dataList.push(phaseData);
        // }
      });
      return dataList;
    },

    getData() {
      let replacements = {
        phase: {
          A: "A相",
          B: "B相",
          C: "C相",
        },
        bridge: {
          上: "上桥臂",
          下: "下桥臂",
        },
        tower: {
          1: "阀塔1",
          2: "阀塔2",
          3: "阀塔3",
          4: "阀塔4",
          5: "阀塔5",
        },
      };
      let phaseArr = Array.from(
        new Set(statePredCvResponse.data.stats.map((item) => item.phase + "相"))
      );
      let ary = this.transformData(statePredCvResponse.data.stats);
      let arr = [
        {
          phase: "A相",
          bridgeTop: [
            {
              tower: 1,
              status: 1,
            },
          ],
          bridgeBot: [
            {
              tower: 2,
              status: 2,
            },
          ],
        },
      ];
    },

    handleJ(index, item) {
      this.activeJ = index;
      this.activeLabel = item.label;
      this.$store.commit("setJName", item.label);
    },
    handleFata(index, status, fata, type, label) {
      this.active = index;
      this.$store.commit("setName", fata + "/" + type + " / " + label);
    },
  },
};
</script>
<style scoped lang="less">
.huan-liu-fa {
  p {
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    line-height: 32px;

    span {
      color: #1da9ed;
    }
  }

  .top {
    p {
      line-height: 20px;
      padding-right: 20px;
      cursor: pointer;

      &.j-active {
        color: #1da9ed;
      }

      &:not(:first-child) {
        margin-left: 20px;
      }

      &:not(:last-child) {
        border-right: 2px solid rgba(255, 255, 255, 0.5);
      }
    }
  }

  .bot {
    margin-top: 10px;

    .item {
      width: 33.3%;
      border: 1px solid rgba(255, 255, 255, 0.1);

      h2 {
        color: #ffffff;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        line-height: 90px;
        width: 150px;
        background: #1cbe21;
      }

      h3 {
        color: #ffffff;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        line-height: 44px;
        width: 120px;
        background: rgba(255, 255, 255, 0.1);
      }

      .qiao-bi {
        width: calc(100% - 150px);

        .qiao-bi-item {
          width: 100%;

          &:not(:last-child) {
            border-bottom: 2px solid rgba(255, 255, 255, 0.5);
          }

          .fata {
            width: calc(100% - 120px);

            p {
              line-height: 44px;
              padding: 0 10px;
              cursor: pointer;

              &:not(:first-child) {
                margin-left: 10px;
              }

              &.active {
                color: #1cbe21;
              }
            }
          }
        }
      }
    }
  }
}
</style>
